<template>
	<!-- #ifdef H5 -->
	<view class="diy-service component-diy" ref="diyService">
		<view @click.stop>
			<uni-fab v-if="positionChange" :pattern="pattern" :content="content" :horizontal="horizontal"
				:vertical="vertical" :direction="direction" :buttonIcon="buttonIcon" :showShadow="showShadow"
				:boxShadowColor="boxShadowColor" @fabClick="fabClick" @trigger="trigger"></uni-fab>
		</view>
		<view
			style="background-color: #ffffff;border-radius: 5px;text-align: center;font-size: 12px;line-height: 40px;">
			<text>{{positionText}}悬浮窗放置区域，小程序仅显示悬浮窗</text>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<view class="diy-service" :class="{right: componentData.position == 1}">
		<!-- <block v-if="componentData.customer_service == 1">
			<view @click='call'>
				<image class="img" :src="componentData.telImg"></image>
			</view>
		</block>
		<block v-else-if="componentData.customer_service == 2">
			<button class="button" open-type="contact">
				<image class="img" :src="componentData.supportImg"></image>
			</button>
		</block> -->
		<uni-fab :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" :buttonIcon="buttonIcon" :showShadow="showShadow" :boxShadowColor="boxShadowColor"
			@trigger="trigger"></uni-fab>
	</view>
	<!-- #endif -->
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	export default {
		props: ['componentData', 'storeInfo'],
		components: {
			uniFab
		},
		data() {
			return {
				customer_service: 0,
				positionChange: true,
				activeIndex: -1,
				timer: '',
				H5CustomerService: '../../static/images/customer_service.png'
			};
		},
		watch: {
			'componentData': {
				deep: true,
				handler: function() {
					this.positionChange = !this.positionChange;
					this.$nextTick(() => {
						this.positionChange = !this.positionChange;
					})
				}
			}
		},
		computed: {
			showShadow() {
				return this.componentData.showShadow ? true : false;
			},
			boxShadowColor() {
				return this.componentData.boxShadowColor;
			},
			buttonIcon() {
				return this.componentData.buttonIcon;
			},
			content() {
				let iconPath = this.H5CustomerService;
				if (this.componentData.serviceImage) {
					iconPath = this.componentData.serviceImage
				}
				let fileList = this.componentData.fileList;
				fileList = fileList ? fileList : [];
				let contentArr = [];
				if (!this.componentData.service) {
					let active = this.activeIndex == 0;
					contentArr.push({
						iconPath: iconPath,
						selectedIconPath: iconPath,
						text: '客服',
						active: active,
						type: this.componentData.customer_service,
					});
				}
				fileList.forEach((item, index) => {
					let url = '';
					if (item.page && item.page.url) {
						url = item.page.url;
					}
					let active = this.activeIndex == (index + 1);
					contentArr.push({
						iconPath: item.imageUrl,
						selectedIconPath: item.imageUrl,
						text: item.title,
						active: active,
						url: url,
						type: item.page && item.page.type ? item.page.type : 2
					});
				});
				return contentArr;
			},
			pattern() {

				let zIndex = -1;
				if (this.componentData.zIndex) {
					zIndex = this.componentData.zIndex;
				}
				// #ifdef H5
				if (this.componentData.position == 0) {
					return {
						'left': "calc(50vw - 185px)",
						'leftBox': "calc(50vw - 195px)",
						'zIndex': zIndex > 0 ? zIndex : '',
						color: this.componentData.color,
						backgroundColor: this.componentData.backgroundColor,
						buttonColor: this.componentData.buttonColor,
						selectedColor: this.componentData.selectedColor,
						buttonIconColor: this.componentData.buttonIconColor,
					};
				} else {
					return {
						'right': "calc(50vw - 185px)",
						'rightBox': "calc(50vw - 195px)",
						'zIndex': zIndex > 0 ? zIndex : '',
						color: this.componentData.color,
						backgroundColor: this.componentData.backgroundColor,
						buttonColor: this.componentData.buttonColor,
						selectedColor: this.componentData.selectedColor,
						buttonIconColor: this.componentData.buttonIconColor,
					};
				}
				// #endif
				// #ifdef MP-WEIXIN
				if (this.componentData.position == 0) {
					return {
						'zIndex': zIndex > 0 ? zIndex : '',
						color: this.componentData.color,
						backgroundColor: this.componentData.backgroundColor,
						buttonColor: this.componentData.buttonColor,
						selectedColor: this.componentData.selectedColor,
						buttonIconColor: this.componentData.buttonIconColor,
					};
				} else {
					return {
						'zIndex': zIndex > 0 ? zIndex : '',
						color: this.componentData.color,
						backgroundColor: this.componentData.backgroundColor,
						buttonColor: this.componentData.buttonColor,
						selectedColor: this.componentData.selectedColor,
						buttonIconColor: this.componentData.buttonIconColor,
					};
				}
				// #endif
			},
			direction() {
				// horizontal:水平显示，vertical：垂直显示
				if (this.componentData.direction == 1) {
					return 'horizontal';
				}
				return 'vertical';
			},
			vertical() {
				// 垂直对齐方式。bottom:下对齐，top：上对齐
				if (this.componentData.vertical == 1) {
					return 'top';
				}
				return 'bottom';
			},
			horizontal() {
				// 水平对齐方式。left:左对齐，right：右对齐
				if (this.componentData.position == 1) {
					return 'right';
				}
				return 'left';
			},
			positionText() {
				let leftRight = '左';
				let topBottom = '下';
				if (this.componentData.position == 1) {
					leftRight = '右'
				}
				if (this.componentData.vertical == 1) {
					topBottom = '上'
				}
				return leftRight + topBottom;
			},
		},
		methods: {
			//拨打电话
			call: function() {
				console.log('call')
				var phone = this.storeInfo.phone;
				if (!phone) {
					uni.showToast({
						title: '门店未设置电话',
						icon: 'none',
					})
					return;
				}
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			trigger(e) {
				console.log('trigger', e)
				this.activeIndex = e.index;
				if (e.item.type == 1) {
					this.call();
				} else if (e.item.type == 3) {
					let url = e.item.url;
					this.toUrl(url);
				}
			},
			toUrl(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			fabClick() {
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
					this.$refs.diyService.$el.click();
				}
				this.timer = setTimeout(() => {
					this.timer = null;
				}, 300)
			}
		},
	}
</script>

<style lang="less">
	/* #ifndef H5 */
	.diy-service {
		z-index: 999;

		&.right {
			left: inherit;
			right: 50rpx;
		}
	}

	/* #endif */
	.diy-service {
		.button {
			width: 80rpx;
			height: 80rpx;
			padding: 0;
			margin: 0;
			border: none;
			border-radius: 0;
			background: none;

			&::after {
				padding: 0;
				margin: 0;
				border: none;
				background: none;
				width: 80rpx;
				height: 80rpx;
				border-radius: 0;
			}
		}

		.img {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>
